<template>
    <div class="dw_box">
        <p class="dw_box_title">{{type === 'deposit' ? $t('account.chooseDepositMethod') : $t('account.chooseWithdrawMethod')}}</p>
        <div class="dw_box_nav l-f">
            <a-button @click="onChangeTab(index)" :type="currentTab === index ? 'primary' : 'default'" class="dw_box_nav_item" v-for="(item,index) in navList" :key="index">{{item}}</a-button>
        </div>
        <div class="dw_box_content">
            <!-- 币种充值 -->
             <div v-show="currentTab === 0">
                <div class="c-list dw_box_content_inner" >
                    <div @click="onSelect(index)" class="c-list_item l-f" v-for="(item,index) in coinList" :key="index">
                        <div class="c-list_item_left l-f1 l-f">
                            <img class="c-list_item_left_icon" :src="item.icon" />
                            <div class="c-list_item_left_name">
                                <p class="c-list_item_left_name_label">{{item.label}}</p>
                                <p class="c-list_item_left_name_value">{{item.name}}</p>
                            </div>
                        </div>
                        <a-radio :checked="currentCoin === index"></a-radio>
                    </div>
                </div>
                <a-button @click="onNext" class="dw_box_content_submit" type="primary">{{$t('account.confirm')}}</a-button>
             </div>
             
             <!-- 银行卡充值 -->
              <div class="card" v-show="currentTab === 1">
                <div class="dw_box_content_inner">
                    <NoData :title="$t('account.warning')" :desc="$t('account.warningDesc')" />
                </div>
                <a-button @click="onKF" class="dw_box_content_submit" type="primary">{{$t('account.onlineService')}}</a-button>
              </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useMainStore } from '@/store'
import { useRouter } from 'vue-router'
import { BTC_ADDRESS, ETH_ADDRESS, USDT_ADDRESS } from '@/common/index.js'

import NoData from '@/components/noData/index.vue'

import BtcImg from '@/assets/coins/btc.png'
import EthImg from '@/assets/coins/eth.png'
import UsdtImg from '@/assets/coins/usdt.png'


const props = defineProps({
    type: String,
    default: 'deposit'
})

const { t } = useI18n()
const router = useRouter()
const mainStore = useMainStore()

const currentTab = ref(0)
const navList = computed(() => {
    return [t('account.cryptocurrency'),t('account.bankCard')]
})

const currentCoin = ref(0)

const coinList = reactive([
    {
        id: 32,
        icon: BtcImg,
        label: 'Bitcoin',
        name: 'BTC',
        address: BTC_ADDRESS
    },
    {
        id: 35,
        icon: EthImg,
        label: 'Ethereum',
        name: 'ETH',
        address: ETH_ADDRESS
    },
    {
        id: 23,
        icon: UsdtImg,
        label: 'Tether',
        name: 'USDT',
        address: USDT_ADDRESS
    }
])


const onChangeTab = (index) => {
    currentTab.value = index
}
const onSelect = (index) => {
    currentCoin.value = index
}
const onNext = () => {
    if(props.type === 'deposit') {
        router.push({name: 'deposit', query: coinList[currentCoin.value]})
    }else
    if(props.type === 'withdraw') {
        router.push({name: 'withdraw', query: coinList[currentCoin.value] })
    }
}
const onKF = () => {
    window.location.href = mainStore.webConfig.kefu
}
</script>

<style lang="scss" scoped>
.dw_box {
    &_title {
        font-size: 14px;
        color: #ffffff9e;
        padding: 20px 0;
        box-sizing: border-box;
    }
    &_nav {
        gap: 15px;
        &_item {
            border: 1px solid rgba(134, 131, 164, .5);
            height: 40px;
            font-size: 14px;
            width: 50%;
        }
    }
    &_content {
        padding-top: 40px;
        box-sizing: border-box;
        &_submit {
            margin-top: 20px;
            width: 100%;
            height: 52px;
            border-radius: 20px;
        }
        &_inner {
             height: 250px;
            overflow-y: auto;
        }
    }
}

.c-list {
    &_item {
        padding: 15px 0;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255,255,255,.1);
        cursor: pointer;
        &_left {
            &_icon {
                width: 40px;
                height: 40px;
            }
            &_name {
                margin-left: 5px;
                &_label {
                    font-size: 14px;
                    color: #ffffff;
                }
                &_value {
                    font-size: 14px;
                    color: #ffffff9e;
                }
            }
        }
    }
}

:deep(.ant-btn-default) {
    background: #070628;
    color: #ffffff;
}
:deep(.ant-btn-default:not(:disabled):hover) {
    background: transparent;
    border: 1px solid rgba(134, 131, 164, .5);
    color: #ffffff;
}
</style>